<template>
    <div class="detail">
        <navbar class="nav-bar">
            <template v-slot:left>
                <div @click="back">
                    <van-icon name="arrow-left" size="30" />
                </div>
            </template>
            <template v-slot:center>
                <div style="font-size: 0.5rem;font-weight: 500;">商品详情</div>
            </template>
        </navbar>

        <!-- 轮番图 -->
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#ff8198">
            <van-swipe-item v-for="(item, index) in data.itemInfo.topImages" :key="index">
                <div style="width: 100%;height: 8rem;overflow: hidden;">
                    <img :src="item" style="width: 100%;height: 13rem;">
                </div>
            </van-swipe-item>
        </van-swipe>

        <!-- 商品详情 -->
        <div style="font-size: 17px;padding: 10px;line-height: 25px;color: #5a7280;">
            <div class="flex1">
                <div style="color: #ff8198;font-weight: bold;width: 15%;">标题：</div>
                <div style="width: 80%;">{{ data.itemInfo.title }}</div>
            </div>
            <div style="margin-top: 10px;">
                <span>价格：</span>
                <span style="color: red;">{{ data.itemInfo.price }}</span>
                <span style="margin-left: 2rem;">折扣：</span>
                <span style="color: red;">{{ data.itemInfo.discountDesc }}</span>
            </div>
            <div style="margin-top: 20px;" class="flex-start">
                <div>
                    <span>限时价：</span>
                    <span style="color: red;">￥{{ data.itemInfo.lowPrice }}</span>
                </div>
                <div style="font-size: 15px;">
                    <span v-for="(item, index) in data.columns" :key="index"
                        style="margin-left: 0.333rem;color: #3ba776;font-weight: bold;">
                        {{ item }}
                    </span>
                </div>
            </div>

            <!-- 商品详情图片 -->
            <div style="margin-top: 20px;padding-bottom: 2px;">
                <div v-for="(item, index) in data.detailInfo.detailImage" :key="index">
                    <div style="margin-top: 30px;color: #dd001b;font-weight: bold;">
                        {{ item.key }}
                        <img :src="item1" alt="" v-for="(item1, index) in item.list" :key="index"
                            style="width: 100%;height: 10.3333rem;">
                    </div>
                </div>
            </div>
        </div>

        <!-- 购物车栏 -->
        <div style="position: fixed;left: 0;bottom: 0;width: 90%;height: 1.2667rem;background-color: #fff; margin: 0 20px; border-radius: 1.33rem;" class="flex-between">
            <div class="flex-start" style="font-size: 0.393rem;margin-left: .7333rem;width: 30%;">
                <div class="flex-start">
                    <van-icon name="shop-collect" color="#ff8198" size="0.603rem" />
                    <!-- <span>客服</span> -->
                </div>
                <div style="margin-left: .5667rem;" @click="gotocart">
                    <van-icon name="shopping-cart" color="#ff8198" size="0.603rem" />
                </div>
            </div>

            <div style="font-size: .4333rem;width: 70%;height: 100%;border-radius: .8rem;overflow: hidden;"
                class="flex-start">
                <div style="width: 50%;height: 100%;background-color: #ffc323;color: #fff;" class="flex-center"
                @click="addcart(0)">
                    <span>加入购物车</span>
                </div>
                <div style="width: 50%;height: 100%;background-color: #dd001b;color: #fff;" class="flex-center"
                @click="addcart(1)">
                    <span>立即购买</span>
                </div>
            </div>

        </div>


    </div>
</template>

<script setup>
import { reactive, onMounted } from 'vue'
import navbar from '../../components/navbar.vue'
import { Toast } from 'vant';
import { useRouter, useRoute } from 'vue-router'
import { getDetail, Goods, Shop, GoodsParam, getRecommend } from "../../network/detail";
import { useStore } from 'vuex' // 引入useStore 方法
const store = useStore()  // 该方法用于返回store 实例
const route = useRoute()
const router = useRouter()

let data = reactive({
    iid: '',
    columns: [],
    detailInfo: {},
    itemInfo: {}

})
data.iid = route.query.iid
console.log('iid', data.iid);

let addcart = (is) => {
    let goods={
        iid:data.iid,
        image:data.itemInfo.topImages[0],
        title:data.itemInfo.title,
        desc:data.itemInfo.desc,
        price:data.itemInfo.lowPrice,
        checked:true,
        count:1
    }
    console.log("goods",goods);
    store.commit('addcartgoods',goods)
    if(is===0)
    {
        succcess()
    }
    else{
        gotocart()
    }
}


let succcess=()=>{
    Toast.success('加入购物车成功');
}

let gotocart=()=>{
    router.push('/cart')
}

getDetail(data.iid).then((res) => {
    console.log(res);
    data.iid = res.iid
    data.columns = res.result.columns
    data.detailInfo = res.result.detailInfo
    data.itemInfo = res.result.itemInfo
})


let back = () => {
    router.back()
}




</script>

<style scoped>
.detail {
    height: 100vh;
    position: relative;
    z-index: 999;
}

.nav-bar {
    background-color: var(--color-tint);
    font-weight: 700;
    color: #fff;
}
</style>